<template>
  <div class="app-container">
    <el-card shadow="never">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="就诊人姓名">
          <el-input v-model.trim="searchForm.visitor"></el-input>
        </el-form-item>

        <!-- <el-form-item label="年龄">
          <el-select v-model="searchForm.age" placeholder="请选择">
            <el-option v-for="item in ageList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="服务项目">
          <el-input v-model.trim="searchForm.proDes"></el-input>
        </el-form-item>
        <el-form-item label="护士姓名">
          <el-input v-model.trim="searchForm.dispatchNurses"></el-input>
        </el-form-item>
        <el-form-item label="护士手机号">
          <el-input v-model="searchForm.nursesPhone" clearable>
          </el-input>
        </el-form-item>
        <el-form-item label="订单编号">
          <el-input v-model.trim="searchForm.orderNum"></el-input>
        </el-form-item>

        <el-form-item label="医院名称">
          <el-input v-model="searchForm.hospitalName" clearable>
          </el-input>
        </el-form-item>
        <el-form-item label="下单时间">
          <el-date-picker v-model="searchForm.orderTime" value-format="yyyy-MM-dd" type="daterange" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="服务时间">
          <el-date-picker v-model="searchForm.serviceTime" value-format="yyyy-MM-dd" type="daterange"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>


        <el-form-item label="联系人电话">
          <el-input v-model="searchForm.contactPhone" clearable>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleFilter" class="search-button">查询</el-button>
          <!-- <el-button type="primary" @click="showAdd" class="add-button">添加</el-button> -->
          <el-button @click="derive" class="search-button">导出</el-button>
          <el-button @click="handleReset" class="search-button">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table ref="table" v-loading="listLoading" :data="list" element-loading-text="Loading" fit
        highlight-current-row>
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column align="center" type="index" label="序号" width="55">
        </el-table-column>
        <el-table-column label="医院" align="center" prop="hospitalName">
        </el-table-column>
        <el-table-column label="订单编号" align="center" prop="orderNum">
        </el-table-column>
        <el-table-column label="就诊人" align="center" prop="visitor">
        </el-table-column>
        <el-table-column label="性别" align="center" prop="sex">
        </el-table-column>
        <el-table-column label="年龄" align="center" prop="age">
        </el-table-column>
        <el-table-column label="就诊人地址" align="center" prop="visitorAddress">
        </el-table-column>
        <el-table-column label="服务项目" align="center" prop="serviceItem">
        </el-table-column>
        <el-table-column label="派发护士" align="center" prop="dispatchNurses">
        </el-table-column>
        <el-table-column label="护士手机号" align="center" prop="nursesPhone">
        </el-table-column>
        <el-table-column label="下单时间" align="center" prop="orderTiem">
        </el-table-column>
        <el-table-column label="出发时间" align="center" prop="setOutTime">
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status">
        </el-table-column>
        <el-table-column label="服务结束时间" align="center" prop="serviceFinishTime">
        </el-table-column>
        <el-table-column label="联系人姓名" align="center" prop="contactName">
        </el-table-column>
        <el-table-column label="联系人电话" align="center" prop="contactPhone">
        </el-table-column>
        <el-table-column align="center" label="操作" width="160">
          <template slot-scope="{row}">
            <el-button type="text" @click="goDetails(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="searchForm.pageIndex" :limit.sync="searchForm.pageSize"
        @pagination="getList" />
    </el-card>
    <el-dialog :title="dialogTit" :visible.sync="dialogVisible" width="40%">
      <el-form label-position="right" label-width="120px" ref="form" :model="form">
        <el-form-item label="项目一级名称">
          <el-input v-model.trim="form.proFirstClassName"></el-input>
        </el-form-item>
        <el-form-item label="说明">
          <el-input v-model.trim="form.proDes" type="textarea" :rows="4"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" class="btn-cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import * as orderManagement from '@/api/orderManagement'
  import Pagination from '@/components/Pagination'
  export default {
    components: {
      Pagination
    },
    data() {
      return {
        list: null,
        listLoading: true,
        searchForm: {
          pageIndex: 1,
          pageSize: 10,
          orderTime: [],
          serviceTime: []
        },
        total: 0,
        dialogVisible: false,
        dialogTit: '',
        form: {},
        ageList: [{
          label: '70岁以上',
          value: '70岁以上'
        }, {
          label: '60-70岁',
          value: '60-70岁'
        }, {
          label: '50-60岁',
          value: '50-60岁'
        }, {
          label: '40-50岁',
          value: '40-50岁'
        }, {
          label: '30-40岁',
          value: '30-40岁'
        }, {
          label: '30岁以下',
          value: '30岁以下'
        }],
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        this.searchForm.orderStartTime = this.searchForm.orderTime[0]
        this.searchForm.orderEndTime = this.searchForm.orderTime[1]
        this.searchForm.serviceStartTime = this.searchForm.serviceTime[0]
        this.searchForm.serviceEndTime = this.searchForm.serviceTime[1]
        this.searchForm.hospitalUid = localStorage.getItem('hospitalUid')
        this.searchForm.paymentStatus = '已取消'
        let param = Object.assign({}, this.searchForm)
        delete param.orderTime
        delete param.serviceTime
        orderManagement.queryByPage(param).then(response => {
          this.list = response.data.rows
          this.total = response.data.total
          this.listLoading = false
        }).catch(error => {
          this.listLoading = false
          console.log(error)
        })
      },
      handleFilter() {
        this.searchForm.pageIndex = 1
        this.getList()
      },
      handleReset() {
        this.resetTemp();
        this.getList();
      },
      resetTemp() {
        this.searchForm = {
          pageIndex: 1,
          pageSize: 10,
          orderTime: [],
          serviceTime: [],
        }
      },
      showAdd() {
        this.dialogTit = '新增'
        this.form = {}
        this.dialogVisible = true
      },
      showEdit(row) {
        this.dialogTit = '编辑'
        this.form = Object.assign({}, row)
        delete this.form.createTime
        delete this.form.updateTime
        this.dialogVisible = true
      },
      submit() {
        if (this.dialogTit === '新增') {
          this.creatHandle()
        } else if (this.dialogTit === '编辑') {
          this.editHandle()
        }
      },
      creatHandle() {
        orderManagement.insert(this.form).then(response => {
          if (response.code == 200) {
            this.dialogVisible = false
            this.getList()
            this.$message.success('新增成功')
          }
        }).catch(error => {
          console.log(error)
        })
      },
      editHandle() {
        orderManagement.update(this.form).then(response => {
          if (response.code == 200) {
            this.dialogVisible = false
            this.getList()
            this.$message.success('修改成功')
          }
        }).catch(error => {
          console.log(error)
        })
      },
      delHandle(data) {
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let param = {
            uid: data.uid,
          }
          orderManagement.deleteById(param).then(result => {
            this.$message.success(result.msg)
            this.getList()
          }).catch(error => {
            this.loading = false
            console.log(error)
          })
        }).catch(() => {
          console.log('取消删除')
        });
      },
      goDetails(data) {
        this.$router.push({
          name: 'orderDetails',
          query: {
            uid: data.uid,
            orderNum: data.orderNum,
            status: data.status
          }
        })
      },
      derive() {
        let url = process.env.VUE_APP_BASE_API + "/orderInfo/exportOrderInfo?"
        for (let key in this.searchForm) {
          if (this.searchForm[key]) {
            url = url + key + '=' + this.searchForm[key] + '&'
          }
        }
        //uidListStr
        let selection = this.$refs.table.selection
        let uidList = []
        if (selection.length > 0) {
          selection.forEach(item => {
            uidList.push(item.uid)
          })
          url = url + 'uidListStr=' + uidList.join(',')
        }
        // 创建一个a标签元素
        const downloadLink = document.createElement('a');

        // 设置a标签的href属性为下载链接
        downloadLink.href = url
        // 设置a标签的download属性为文件名
        downloadLink.download = 'file.pdf';
        // 将a标签添加到HTML文档中的某个元素中
        document.body.appendChild(downloadLink);
        // 触发a标签的点击事件，即模拟用户点击下载链接
        downloadLink.click();
        document.body.removeChild(downloadLink);
      },
    }
  }
</script>
